<template>
	<div class="song-list">
		<ul>
			<li
				v-for="(song, index) in songs"
				:key="song.id"
				class="item"
				@click="selectSong(song, index)"
			>
				<div class="rank" v-show="rank">
		          	<span :class="getRankCls(index)">{{getRankText(index)}}</span>
		        </div>
				<div class="content">
					<h4 class="name">{{song.name}}</h4>
					<p class="desc">{{getDesc(song)}}</p>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'SongList',
		props: {
			songs: {
				type: Array,
				default: () => []
			},
			rank: {
			    type: Boolean,
			    default: false
		    }
		},
		methods: {
			selectSong(song, index) {
				this.$emit('select', song, index);
			},
			getDesc(song) {
				if (song.album) {
					return `${song.singer} · ${song.album}`;
				} else {
					return song.singer;
				}
			},
			getRankCls(index) {
				if (index <= 2) {
					return `icon icon${index}`;
				} else {
					return 'text';
				}
			},
			getRankText(index) {
				if (index > 2) {
					return index + 1;
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import "../../common/stylus/variable"
	@import "../../common/stylus/mixin"
	
	.song-list
		.item
			display: flex
			align-items: center
			box-sizing: border-box
			height: 64px
			font-size: $font-sizno-wrape-medium
			.rank
				flex: 0 0 25px
				width: 25px
				margin-right: 30px
				text-align: center
				.icon
					display: inline-block
					width: 25px
					height: 24px
					background-size: 25px 24px
					&.icon0
						bg-image('first')
					&.icon1
						bg-image('second')
					&.icon2
						bg-image('third')
				.text
					color: $color-theme
					font-size: $font-size-large
			.content
				flex: 1
				line-height: 20px
				overflow: hidden
				font-size: 14px
				.name
					no-wrap()
					color: $color-text
				.desc
					no-wrap()
					margin-top: 4px
					color: $color-text-d
					font-size: 12px
</style>